<template>
  <div class="container">
    <div class="app-container">
      <div class="top">
        <el-form ref="formData" :model="formData" label-width="100px" class="demo-ruleForm" :inline="true">
          <el-row type="flex" justify="space-between">
            <el-form-item label="订单编号" prop="memberId">
              <el-input v-model="formData.memberId" placeholder="请输入订单编号" style="width:280px" />
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择" style="width:280px">
                <el-option v-for="item in status" :key="item.id" :label="item.value" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="付费状态" prop="paymentStatus">
              <el-select v-model="formData.paymentStatus" placeholder="请选择" style="width:280px">
                <el-option v-for="item in paymentStatus" :key="item.id" :label="item.value" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="space-between">
            <el-form-item label="发件人姓名" prop="senderName">
              <el-input v-model="formData.senderName" placeholder="请输入发件人姓名" style="width:280px" />
            </el-form-item>
            <el-form-item label="发件人电话" prop="senderPhone">
              <el-input v-model="formData.senderPhone" placeholder="请输入发件人电话" style="width:280px" />
            </el-form-item>
            <el-form-item label="发件人地址" prop="">
              <el-select v-model="formData.senderProvinceId" placeholder="请选择" style="width:86px" @change="address4">
                <el-option v-for="item in province2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.senderCityId" placeholder="请选择" style="width:86px;margin:0 10px;" @change="address5">
                <el-option v-for="item in city2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.senderCountyId" placeholder="请选择" style="width:86px" @change="address6">
                <el-option v-for="item in area2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="space-between">
            <el-form-item label="收件人姓名" prop="receiverName">
              <el-input v-model="formData.receiverName" placeholder="请输入收件人姓名" style="width:280px" />
            </el-form-item>
            <el-form-item label="收件人电话" prop="receiverPhone">
              <el-input v-model="formData.receiverPhone" placeholder="请输入收件人电话" style="width:280px" />
            </el-form-item>
            <el-form-item label="收件人地址" prop="">
              <el-select v-model="formData.receiverProvinceId" placeholder="请选择" style="width:86px" @change="address1">
                <el-option v-for="item in province1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.receiverCityId" placeholder="请选择" style="width:86px;margin:0 10px;" @change="address2">
                <el-option v-for="item in city1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="formData.receiverCountyId" placeholder="请选择" style="width:86px" @change="address3">
                <el-option v-for="item in area1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>
          <el-form-item>
            <el-button type="primary" style="background: #e15536;width: 90px;border:0px" @click="searchBtn">搜索</el-button>
            <el-button style="width: 90px;" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom">
        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="" label="序号" type="index" width="70" />
          <el-table-column prop="id" label="订单编号" width="200" />
          <el-table-column prop="" label="运单编号" width="200" />
          <el-table-column prop="createTime" label="下单时间" width="200" />
          <el-table-column prop="status" label="订单状态" width="100" />
          <el-table-column prop="senderName" label="发件人姓名" width="100" />
          <el-table-column prop="senderPhone" label="发件人电话" width="120" />
          <el-table-column prop="senderAddress" label="发件人地址" width="200" />
          <el-table-column prop="receiverName" label="收件人姓名" width="100" />
          <el-table-column prop="receiverPhone" label="收件人电话" width="120" />
          <el-table-column prop="receiverAddress" label="收件人地址" width="200" />
          <el-table-column prop="orderType" label="取件类型" width="100" />
          <el-table-column prop="paymentMethod" label="付费类型" width="100" />
          <el-table-column prop="paymentStatus" label="付费状态" width="100" />
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="pageChange"
          />
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import { orderAPI } from '@/api/operation'
import { getLocationAPI } from '@/api/location'
export default {
  name: 'OrderForm',
  data() {
    return {
      formData: {
        memberId: '',
        page: 1,
        pageSize: 10,
        // paymentMethod: 0,
        paymentStatus: '',
        // pickupType: 0,
        // receiverAddress: '',
        receiverName: '',
        receiverPhone: '',
        // senderAddress: '',
        senderName: '',
        senderPhone: '',
        status: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        senderCityId: '',
        senderCountyId: '',
        senderProvinceId: ''
      },
      tableData: [],
      total: 0,
      parentId: '',
      province1: [],
      city1: [],
      area1: [],
      province2: [],
      city2: [],
      area2: [],
      status: [
        { id: 23000, value: '代取件' },
        { id: 23001, value: '已取件' },
        { id: 23002, value: '运输中' },
        { id: 23003, value: '派送中' },
        { id: 23004, value: '已签收' },
        { id: 23008, value: '已取消' },
        { id: 23009, value: '已签收' },
        { id: 23010, value: '拒收' }
      ],
      orderType: [
        { id: 1, value: '到店自取' },
        { id: 2, value: '送货上门' }
      ],
      paymentMethod: [
        { id: 1, value: '预结' },
        { id: 2, value: '到付' }
      ],
      paymentStatus: [
        { id: 1, value: '未付' },
        { id: 2, value: '已付' }
      ]
    }
  },
  created() {
    this.orderList(this.formData)
    this.getProvince()
  },
  methods: {
    handleClick(row) {},
    async orderList(data) {
      const res = await orderAPI(data)
      this.total = +res.data.data.counts
      this.tableData = res.data.data.items

      this.tableData.forEach(value => {
        this.status.forEach(item => {
          if (value.status === item.id) {
            value.status = item.value
          }
        })
      })

      this.tableData.forEach(value => {
        this.orderType.forEach(item => {
          if (value.orderType === item.id) {
            value.orderType = item.value
          }
        })
      })

      this.tableData.forEach(value => {
        this.paymentMethod.forEach(item => {
          if (value.paymentMethod === item.id) {
            value.paymentMethod = item.value
          }
        })
      })

      this.tableData.forEach(value => {
        this.paymentStatus.forEach(item => {
          if (value.paymentStatus === item.id) {
            value.paymentStatus = item.value
          }
        })
      })
    },
    pageChange(page) {
      // 查询下一页数据
      this.formData.page = page
      this.orderList(this.formData)
    },
    async getProvince() {
      // 获取省列表
      const res = await getLocationAPI(this.parentId)
      this.province1 = res.data.data
      this.province2 = res.data.data
    },
    async address1(value) {
      // 收件人 省 =》市
      this.formData.receiverProvinceId = value
      this.formData.receiverCityId = ''
      this.formData.receiverCountyId = ''
      const res = await getLocationAPI({ parentId: value })
      this.city1 = res.data.data
    },
    async address2(value) {
      // 收件人 市 =》区
      this.formData.receiverCityId = value
      this.formData.receiverCountyId = ''
      const res = await getLocationAPI({ parentId: value })
      this.area1 = res.data.data
    },
    address3(value) {
      this.formData.receiverCountyId = value
    },
    async address4(value) {
      // 收件人 省 =》市
      this.formData.senderProvinceId = value
      this.formData.senderCityId = ''
      this.formData.senderCountyId = ''
      const res = await getLocationAPI({ parentId: value })
      this.city2 = res.data.data
    },
    async address5(value) {
      // 收件人 市 =》区
      this.formData.senderCityId = value
      this.formData.senderCountyId = ''
      const res = await getLocationAPI({ parentId: value })
      this.area2 = res.data.data
    },
    address6(value) {
      this.formData.senderCountyId = value
    },
    searchBtn() {
      this.orderList(this.formData)
    },
    async resetBtn() {
      this.$refs.formData.resetFields()
      this.receiverProvinceId = ''
      this.senderProvinceId = ''
      await this.orderList(this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  background-color: #fff;
}
.bottom{
   background-color: #fff;
   margin-top: 10px;
}
.demo-ruleForm{
  padding: 15px;
}
</style>

